<style type="text/css">
.global_form_popup #image-wrapper{
    max-width: 300px;
    float: left;
    margin-right: 10px;    
}
.global_form_popup #upload{
    margin-top: 23px;    
}
#preview_image img{
    max-height: 400px;
    max-width: 450px;     
}
#preview_block{
    background: no-repeat scroll center center;
    float: left;  
    margin-left: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid #C6C8C6;
    border-radius: 8px 8px 8px 8px;
    z-index: 99;
}
.preview-wrapper{
    padding-left: 115px;
    padding-top: 100px;
}
</style>

<?php $this->headScript()
        ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Webmix/externals/scripts/File.Upload.js')
?>

<div style="width: 350px; height: 215px; padding: 20px;">
    <?php echo $this->form->setAttrib('class', 'global_form_popup')->render($this); ?>
<!--    <div id='preview_image'><img /></div> -->
    <div id="thumbnail-controller" class="thumbnail-controller">
    </div>
    <div class="preview-wrapper" id="preview-wrapper">
            <div id="preview_block"></div>
    </div>
</div>



<script type="text/javascript">
    
    function submitImage(){
        var file_id = $('file_id').get('value');
        var file_url = $('file_url').get('value');
        <?php if($this->type == 'edit'):?>  
            var href = en4.core.baseUrl + 'webmix/album/edit/album/<?php echo $this->album?>/photo/'+file_id+'/format/smoothbox';
            this.location.href = href;
        <?php else:?>    
            parent.setPhoto(file_url,file_id);
            parent.Smoothbox.close();
        <?php endif?>        
    }
    window.addEvent('domready', function(){
    	$("image").addEvent('change', function(){
    	   createIframeUpload();return;
//    	    $('preview-wrapper').setStyles({'display': 'none'});
//            $('preview_image').setStyles({'display': 'block'});
    		var upload = new Upload({
    			url: en4.core.baseUrl + 'webmix/album/preview/format/json',
    			images: ['image'],
//                onRequest: function(){
//                    $('preview_image').set('html', '<img src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/loading.gif' +'">');
//                  },               
    			onComplete: function(response){   			 
                    response = JSON.decode(response);
    				//$('preview_image').getElement('img').set('src',response.preview_url);
                    $('file_id').set('value',response.file_id);
                    $('file_url').set('value',response.file_url);
                    $('preview_block').setStyle('background-image','url('+response.file_url+')');

    			}
    		});		
    	   upload.send();      
    	});
    });
    
    function addElementImageUpload(){
       var b = $('iframe_upload_image');
       if(b) b.destroy();
       
        var el = new Element('input',{
            'type':'file',
            'name':'image',
            'id'  :'image',
        });
        el.inject($('image-element'));
        el.addEvent('change',function(){
            createIframeUpload();
        });
    }    
    function getImage(){
        return $('image');
    }
    function showPreviewImage(file_id,file_url){ 
        $('file_id').set('value',file_id);
        $('file_url').set('value',file_url);
        $('preview_block').setStyle('background-image','url('+file_url+')');
        $('thumbnail-controller').innerHTML = "";
    }
    function createIframeUpload(){
        var iframe = new Element('iframe',{
            'src':en4.core.baseUrl + 'webmix/album/previewex/format/smoothbox',
            'id':'iframe_upload_image',
            'styles':{
                'display':'none'
            }
        });
//        $('thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='application/modules/Core/externals/images/loading.gif'/><?php echo $this->translate('Loading...');?></div>";
        $('thumbnail-controller').innerHTML = "<?php echo $this->translate('Loading...');?>";
        iframe.inject($('global_content_simple'));
        
        
    }
    function back(){
        var href = en4.core.baseUrl + 'webmix/album/edit/album/<?php echo $this->album?>/format/smoothbox';
        this.location.href = href;
    }
//    function previewImage(){
//		var upload = new File.Upload({
//			url: en4.core.baseUrl + 'webmix/album/preview/format/json',
//			images: ['image'],
//			onComplete: function(response){   			 
//                response = JSON.decode(response);
//				$('preview_image').getElement('img').set('src',response.preview_url);
//                $('file_id').set('value',response.file_id);
//                $('file_url').set('value',response.file_url);
//			}
//		});		
//	   upload.send();                
//    }
//    function previewImage(){
//        var url = $('preview_image').getElement('img').get('src');
//        //$('preview_block').setStyle('background-image','url('+url+')');
//        $('preview-wrapper').setStyles({'display': 'block'});
//        $('preview_image').setStyles({'display': 'none'});
//    }        
</script>
<button href="javascript:void(0)" style="float: right; margin: 5px 10px 5px 5px;" onclick="parent.Smoothbox.close();"><?php echo $this->translate('Cancel');?></button>
<?php if ($this->type == 'edit'):?>    
<button href="javascript:void(0)" style="float: right; margin: 5px 10px 5px 5px;" onclick="back();"><?php echo $this->translate('Back');?></button>
<?php endif;?>